<template>
  <div v-loading="loading" class="app-container">
    <UserFilter
      :keyword.sync="obj.filter.keyword"
      :zone.sync="obj.filter.zone"
      :site.sync="obj.filter.site"
      :is_online.sync="obj.filter.is_online"
      :min_money.sync="obj.filter.min_money"
      :max_money.sync="obj.filter.max_money"
      :min_level.sync="obj.filter.min_level"
      :max_level.sync="obj.filter.max_level"
      :pet_min_level.sync="obj.filter.pet_min_level"
      :pet_max_level.sync="obj.filter.pet_max_level"
      :goods_keyword.sync="obj.filter.goods_keyword"
      :pet_keyword.sync="obj.filter.pet_keyword"
      :skill_min_level.sync="obj.filter.skill_min_level"
      :skill_max_level.sync="obj.filter.skill_max_level"
      :skill_keyword.sync="obj.filter.skill_keyword"
      @success="getObjList"
    />
    <el-row :gutter="5">
      <el-col
        :span="8"
      >
        <el-card>
          <div slot="header">
            <span> 角色列表({{ obj.total }}) </span>
            <!-- 暂时隐藏关闭功能，因为关闭不了
            <el-button type="text" size="small" style="float: right; padding: 3px 6px;" @click="stopUserList">
              关闭
            </el-button>
            -->
            <el-button type="text" size="small" style="float: right; padding: 3px 6px;" @click="handleRunUserList">
              临时启动
            </el-button>
            <el-button type="text" size="small" style="float: right; padding: 3px 6px;" @click="handleCreateWorkObj">
              分配工作
            </el-button>
            <el-button type="text" size="small" style="float: right; padding: 3px 6px;" @click="handleBatchCreateObj">
              批量添加
            </el-button>
          </div>
          <div>
            <el-table
              :data="obj.dataList"
              style="width: 100%"
              :highlight-current-row="true"
              :current-row-key="obj.obj_id"
              row-key="id"
              @row-click="handleSelectObj"
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                type="selection"
                width="55"
              />
              <el-table-column
                prop="name"
                label="名称"
              />
              <el-table-column
                prop="task"
                width="80px"
                label="任务"
              />
              <el-table-column
                prop="job"
                width="80px"
                label="职业"
              />
              <el-table-column
                prop="level"
                width="60px"
                label="等级"
              />
              <el-table-column
                prop="step"
                width="60px"
                label="阶级"
              />
              <el-table-column
                prop="is_online"
                width="60px"
                label="状态"
              />
              <el-table-column
                fixed="right"
                label="操作"
                width="100px"
              >
                <template slot-scope="{row}">
                  <el-button size="mini" type="text" style="margin-right: 8px" @click="handleUpdateObj(row)">
                    编辑
                  </el-button>
                  <el-popconfirm title="确定删除?" @onConfirm="deleteObj(row.id)">
                    <el-button slot="reference" size="mini" type="text">
                      删除
                    </el-button>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
            <pagination v-show="obj.total>0" :total="obj.total" :page.sync="obj.filter.page_num" :limit.sync="obj.filter.page_size" @pagination="getObjList" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="16">
        <UserInfo :user-id="obj.obj_id" :refresh.sync="obj.refresh" />
      </el-col>
    </el-row>
    <ObjDialog
      :obj-id="String(obj.form.obj_id)"
      :status.sync="obj.form.status"
      :show.sync="obj.form.show"
      @success="getObjList"
    />
    <BatchObjDialog
      :obj-id="String(obj.form.obj_id)"
      :status.sync="obj.form.status"
      :show.sync="obj.form.batchShow"
      @success="getObjList"
    />
    <ImportObjDialog
      :status.sync="obj.form.status"
      :show.sync="obj.form.importShow"
      @success="getObjList"
    />
    <WorkDialog
      :status.sync="obj.form.status"
      :show.sync="obj.form.workShow"
      :users="obj.form.users"
      @success="getObjList"
    />
    <RunDialog
      :status.sync="obj.form.status"
      :show.sync="obj.form.runShow"
      :users="obj.form.users"
      @success="getObjList"
    />
  </div>
</template>

<script>
import { Message } from 'element-ui'
import Pagination from '@/components/Pagination'
import {
  exportUserApi as exportObjListApi,
  deleteUserApi as deleteObjApi,
  stopUserListApi,
  getUserListApi as getObjListApi
} from '@/api/user'
import ObjDialog from './components/ObjDialog'
import BatchObjDialog from './components/BatchObjDialog'
import ImportObjDialog from './components/ImportObjDialog'
import RunDialog from './components/RunDialog'
import WorkDialog from './components/WorkDialog'
import UserFilter from './components/UserFilter'
import UserInfo from './components/UserInfo'
export default {
  name: 'User',
  components: { Pagination, ObjDialog, WorkDialog, RunDialog, BatchObjDialog, ImportObjDialog, UserInfo, UserFilter },
  data() {
    return {
      loading: false,
      obj: {
        total: 0,
        dataList: [],
        obj_id: null,
        filter: {
          keyword: '',
          min_money: '',
          max_money: '',
          min_level: '',
          max_level: '',
          goods_keyword: '',
          pet_keyword: '',
          pet_min_level: '',
          pet_max_level: '',
          skill_keyword: '',
          skill_min_level: '',
          skill_max_level: '',
          zone: '40',
          site: '1',
          is_online: null,
          page_num: 1,
          page_size: 32
        },
        refresh: false,
        form: {
          obj_id: null,
          show: false,
          batchShow: false,
          importShow: false,
          workShow: false,
          runShow: false,
          users: [],
          status: 'create'
        }
      }
    }
  },
  created() {
    this.getObjList()
  },
  activated() {
    this.getObjList()
  },
  methods: {
    handleSelectionChange(value) {
      console.log(value)
      this.obj.form.users = value
    },
    handleSelectObj(row) {
      this.obj.obj_id = row.id
    },
    stopUserList() {
      if (this.obj.form.users.length === 0) {
        Message({
          message: '请先选择角色',
          type: 'error',
          duration: 2 * 1000
        })
        return
      }
      const data = {
        users: this.obj.form.users
      }
      stopUserListApi(data).then(resp => {
        if (resp.code === 0) {
          this.obj.form.users = []
          this.$notify({
            message: '操作成功',
            type: 'success',
            duration: 2000
          })
        }
      })
    },
    exportObjList() {
      const data = {}
      exportObjListApi(data).then(resp => {
        if (resp.code === 0) {
          this.$notify({
            message: '导出成功',
            type: 'success',
            duration: 2000
          })
        }
      })
    },
    getObjList() {
      this.loading = true
      const data = this.obj.filter
      getObjListApi(data).then(resp => {
        if (resp.code === 0) {
          this.obj.dataList = resp.data.data_list
          this.obj.total = resp.data.total
          if (this.obj.dataList.length > 0) {
            this.obj.obj_id = this.obj.dataList[0].id
            this.obj.refresh = true
          } else {
            this.obj.obj_id = null
          }
        }
        this.loading = false
      })
    },
    handleRunUserList() {
      if (this.obj.form.users.length === 0) {
        Message({
          message: '请先选择角色',
          type: 'error',
          duration: 2 * 1000
        })
        return
      }
      this.obj.form.status = 'create'
      this.obj.form.runShow = true
    },
    handleCreateWorkObj() {
      if (this.obj.form.users.length === 0) {
        Message({
          message: '请先选择角色',
          type: 'error',
          duration: 2 * 1000
        })
        return
      }
      this.obj.form.status = 'create'
      this.obj.form.workShow = true
    },
    handleCreateObj() {
      this.obj.form.status = 'create'
      this.obj.form.show = true
    },
    handleBatchCreateObj() {
      this.obj.form.status = 'create'
      this.obj.form.batchShow = true
    },
    handleImportObj() {
      this.obj.form.status = 'import'
      this.obj.form.importShow = true
    },
    handleUpdateObj(row) {
      this.obj.form.obj_id = row.id
      this.obj.form.status = 'update'
      this.obj.form.show = true
    },
    deleteObj(obj_id) {
      this.loading = true
      const data = {
        obj_id: parseInt(obj_id)
      }
      deleteObjApi(data).then(resp => {
        if (resp.code === 0) {
          this.$notify({
            message: '操作成功',
            type: 'success',
            duration: 2000
          })
          this.getObjList()
        }
      })
    }
  }
}
</script>
